<template>
    <div class="container">
        <mt-header  title="编辑地址">
            <router-link to="" slot="left">
                <mt-button icon="back" @click.native="$router.back(-1)">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="userinfo-form">
            <form @submit.prevent="submit()">
                <div class="line"></div>
                <div class="section">
                    <label>姓名</label>
                    <input type="text" v-model="formData.name"/>
                </div>

                <div class="section">
                    <label>手机号</label>
                    <input type="number" v-model="formData.tel"/>
                </div>
                <div class="section">
                    <label>省市区</label>
                    <input type="text" v-model="formData.diqu"/>
                </div>
                <div class="section">
                    <label>详细地址</label>
                    <input type="text" v-model="formData.dizhi"/>
                </div>
                <div class="default-section">
                    <input type="checkbox" id="default" value="Mike" v-model="formData.moren"><label for="default">设为默认地址</label>
                </div>
                <button class="btn project-btn" type="submit">保存地址</button>
            </form>
        </div>
    </div>

</template>

<script>


    export default {
        name: "AddAddress",

        data() {
            return {
                options: {
                    id: 0
                },
                formData: {
                    name: '',
                    tel: '',
                    diqu: '',
                    dizhi: '',
                    moren: 0,
                },
                uid:this.$store.getters.getUserInfo.uid
            }
        },
        mounted() {
            if (this.$route.params.id) {
                this.options.id = this.$route.params.id
                this.getData()
            }
        },
        methods: {
            getData() {
                if (!this.options.id)
                    return false
                this.$axios( {
                    method: 'post',
                    url: 'Index/editdizhia',
                    data: {
                        uid: this.uid,
                        id: this.options.id
                    }
                } ).then( result => {
                    result.data.moren=result.data.moren==1?true:false
                    this.formData = result.data
                } ).catch( error => {
                } );
            },
            submit() {
                let _this = this;
                if (!this.formData.name) {
                    this.$msgbox.alert( '姓名不能为空', '提示' )
                    return false
                }
                if (!this.formData.tel) {
                    this.$msgbox.alert( '手机号不能为空', '提示' )
                    return false
                } else if (!this.pubFun.validateMobile( this.formData.tel )) {
                    this.$msgbox.alert( '手机号格式不正确', '提示' )
                    return false
                }
                if (!this.formData.diqu) {
                    this.$msgbox.alert( '省市区不能为空', '提示' )
                    return false
                }
                if (!this.formData.dizhi) {
                    this.$msgbox.alert( '详细地址不能为空', '提示' )
                    return false
                }
                this.formData.moren = this.formData.moren ? 1 : 0;
                let url='';
                if(this.options.id){
                    url='Index/editdizhib'
                    this.formData.id= this.options.id
                }
                else{
                    url='Index/adddizhi'
                    this.formData.id = ''
                }
                this.$axios( {
                    method: 'post',
                    url: url,
                    data: this.formData
                } ).then( result => {
                    this.$msgbox.alert( result.data.name, '操作成功' ).then( action => {
                        _this.$router.go(-1)
                    } )
                } ).catch( error => {
                    this.$msgbox.alert( '出错了' )
                } );
            }
        }
    }
</script>

<style scoped>
    .container {
        padding: 0;
        background-image: url("../../../../static/images/background.jpg");
        background-size: 100% 100%;
    }

    .userinfo-form {
        border-radius: 20px;
        padding: 0 2vh;
        margin: 1.5vh;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        font-size: 28px;
        min-height: 90vh;
    }

    .section {
        display: flex;
        flex-direction: row;
        height: 100px;
        line-height: 100px;
        border-bottom: #F0F0F2 1px solid;
        background-color: #fff;
    }

    .section:last-child {
        border-bottom: none;
    }

    .section label {
        width: 140px;
        font-weight: 800;
        text-align: right;
    }

    .section input {
        width: 75%;
        /*padding: 36px 0 ;*/
        margin-left: 30px;
        text-align: left;
    }

    .default-section {
        padding: 20px 30px 0;
        line-height: 50px;
    }

    .default-section input {
        vertical-align: middle;
        margin-right: 10px;
        width: 30px;
        height: 30px;

    }

    .default-section input:checked{

    }

    .line {
        padding: 0 30px;
        height: 40px;
        line-height: 40px;
    }

    .phone-section input {
        width: 220px;
    }

    .error-icon {
        margin-top: 23px;
    }

    .error .error-icon {
        display: block;
    }

    .error span {
        color: #F43530;
    }

    .error-info {
        height: 50px;
        margin-top: 10px;
        line-height: 50px;
        padding-left: 60px;
        color: #F43530;
    }

    .project-btn {
        position: absolute;
        bottom: 50px;
        left: 10%;
        width: 80%;
        background: linear-gradient(to top right, #FF7F53, #FF5B4B);
        height: 70px;
        font-size: 24px;
        font-weight: 900;
        line-height: 70px;
        border-radius: 40px;
        color: #fff;
        border: 0;
        z-index: 99;
    }

    .getcode-btn {
        height: 54px;
        line-height: 54px;
        margin: 14px 0 0 0;
        font-size: 24px;
        padding: 0 10px;
        width: 200px;
    }

    .default-modal {
        padding: 0;
        width: 525px;
        border-radius: 15px;
    }


</style>
